<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/details.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="warp">
            <a href="#"><span class="logo"></span></a>
            <div class="nav">
                <ul class="nav-menu">
                    <li><a href="#" class="a-one">真我Q2 Pro</a> </li>
                    <li class="">
                        <a href="#" class="a-one xianshi">手机</a>
                        <div class="nav-submenu">
                            <div class="nav-submenu-warp ">
                                <ul class="phone-list">
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone1.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone2.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone3.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone4.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone5.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone6.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="list.html">
                                            <div class="phone-list-img" style="margin-top: 45px;">
                                                <img src="img/phone7.png" alt="">
                                                <span style="font-size: 16px;">更多</span>
                                            </div>     
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#" class="a-one xianshi">配件</a></li>
                    <li><a href="#" class="a-one">品牌</a></li>
                    <li><a href="#" class="a-one">服务</a></li>
                    <li><a href="#" class="a-one">社区</a></li>
                    <li><a href="#" class="a-one">APP</a></li>
                </ul>
            </div>
            <div class="nav-right">
                <a href="#"><span class="person"></span></a>
            </div>
        </div>
    </div>
     <!-- 个人信息 -->
     <div class="personal">
        <ul>
            <li><a href="shopcar.html" id="gouwuche">购物车</a> </li>
            <li><a href="order.html" id="dingdan">我的订单</a></li>
            <li><a href="login.html" id="denglu">登录</a></li>
        </ul>
    </div>
    <div class="mask">
    </div>
    <!-- 内容 -->
    <div class="phone-title">
        <div class="phone-details">
            <div class="phone-name">
                <span>真我V5 5G</span>
            </div>
            <ul class="phone-data">
                <li>概述</li>
                <li>参数</li>
                <li>R码通道</li>
            </ul>
        </div>
    </div>
    <div class="phone-content">
        
    </div>
    
    <!-- 参数 -->
    <div class="goods-tabs">
        <div class="wrap">
           <p>概览</p>
        </div>
    </div>
    <div class="goods-overview">
        <div class="wrapper">
            <img src="https://r1.realme.net/general/20200805/1596642592441.jpg"><img src="https://r1.realme.net/general/20200805/1596642091566.jpg"><img src="https://r1.realme.net/general/20200805/1596642091569.jpg"><img src="https://r1.realme.net/general/20200805/1596642091605.jpg"><img src="https://r1.realme.net/general/20200805/1596642091343.jpg"><img src="https://r1.realme.net/general/20200805/1596642091574.jpg"><img src="https://r1.realme.net/general/20200805/1596642091602.jpg"><img src="https://r1.realme.net/general/20200805/1596642143187.jpg"><img src="https://r1.realme.net/general/20200805/1596642143363.jpg"><img src="https://r1.realme.net/general/20200805/1596642143358.jpg"><img src="https://r1.realme.net/general/20200805/1596642143204.jpg"><img src="https://r1.realme.net/general/20200805/1596642143344.jpg"><img src="https://r1.realme.net/general/20200805/1596642143335.jpg"><img src="https://r1.realme.net/general/20200805/1596642143201.jpg"><img src="https://r1.realme.net/general/20200805/1596642203547.jpg"><img src="https://r1.realme.net/general/20200805/1596642203680.jpg"><img src="https://r1.realme.net/general/20200805/1596642203396.jpg"><img src="https://r1.realme.net/general/20200805/1596642203413.jpg"><img src="https://r1.realme.net/general/20200805/1596642203441.jpg"><img src="https://r1.realme.net/general/20200805/1596642203557.jpg"><img src="https://r1.realme.net/general/20200805/1596642203567.jpg"><img src="https://r1.realme.net/general/20200805/1596642241379.jpg"><img src="https://r1.realme.net/general/20200805/1596642241097.jpg"><img src="https://r1.realme.net/general/20200805/1596642241349.jpg"><img src="https://r1.realme.net/general/20200805/1596642241403.jpg"><img src="https://r1.realme.net/general/20200805/1596642241372.jpg"><img src="https://r1.realme.net/general/20200805/1596642241378.jpg"><img src="https://r1.realme.net/general/20200807/1596790636996.jpg"><img src="https://r1.realme.net/general/20200805/1596642280945.jpg"><img src="https://r1.realme.net/general/20200805/1596642281209.jpg"><img src="https://r1.realme.net/general/20200805/1596642281206.jpg"><img src="https://r1.realme.net/general/20200805/1596642281050.jpg"><img src="https://r1.realme.net/general/20200805/1596642281422.jpg"><img src="https://r1.realme.net/general/20200805/1596642281380.jpg"><img src="https://r1.realme.net/general/20200805/1596642281519.jpg"><img src="https://r1.realme.net/general/20200805/1596642338854.jpg"><img src="https://r1.realme.net/general/20200805/1596642338660.jpg"><img src="https://r1.realme.net/general/20200805/1596642357928.jpg"><img src="https://r1.realme.net/general/20200805/1596642358077.jpg"><img src="https://r1.realme.net/general/20200805/1596642358203.jpg"><img src="https://r1.realme.net/general/20200805/1596642357919.jpg"><img src="https://r1.realme.net/general/20200805/1596642358216.jpg"><img src="https://r1.realme.net/general/20200805/1596642385564.jpg"><img src="https://r1.realme.net/general/20200805/1596642385277.jpg"><img src="https://r1.realme.net/general/20200805/1596642385396.jpg"><img src="https://r1.realme.net/general/20200805/1596642385133.jpg"><img src="https://r1.realme.net/general/20200805/1596642385416.jpg"><img src="https://r1.realme.net/general/20200805/1596642385168.jpg"><img src="https://r1.realme.net/general/20200805/1596642385384.jpg"><img src="https://r1.realme.net/general/20200805/1596642431332.jpg"><img src="https://r1.realme.net/general/20200805/1596642431037.jpg"><img src="https://r1.realme.net/general/20200805/1596642431162.jpg"><img src="https://r1.realme.net/general/20200805/1596642431278.jpg"><img src="https://r1.realme.net/general/20200805/1596642431067.jpg"><img src="https://r1.realme.net/general/20200805/1596642431150.jpg"><img src="https://r1.realme.net/general/20200805/1596642431160.jpg"><img src="https://r1.realme.net/general/20200805/1596642475488.jpg"><img src="https://r1.realme.net/general/20200805/1596642475631.jpg"><img src="https://r1.realme.net/general/20200805/1596642475776.jpg"><img src="https://r1.realme.net/general/20200805/1596642475231.jpg">
        </div>
    </div>
     <!-- footer -->
     <div class="footer">
        <a href="#" class="footer-services">
            <div class="footer-warp">
                <div class="footer-service">
                    <span class="icon icon-s-7tian"></span>
                    <span>7天无理由退货</span>
                </div>
                <div class="footer-service">
                    <span class="icon icon-s-huanhuo"></span>
                    <span>手机30天换货保障</span>
                </div>
                <div class="footer-service">
                    <span class="icon icon-s-baoyou"></span>
                    <span>满79元包邮</span>
                </div>
                <div class="footer-service">
                    <span class="icon icon-s-zhengpin"></span>
                    <span>正品保障</span>
                </div>
            </div>
        </a>
        <div class="footer-center">
            <div class="footer-menus">
                <div class="wrapper">
                    <div class="footer-menu">
                      <div class="footer-menu-title">推荐产品<span class="icon icon-plus"></span></div>
                      <ul class="footer-menu-list">
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/realme-x7-pro" title="真我 X7 Pro 5G" target="_self">真我 X7 Pro 5G</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/realme-x7" title="真我 X7 5G" target="_self">真我 X7 5G</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/realme-v3" title="真我 V3 5G" target="_self">真我 V3 5G</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/cn/realme-v5" title="真我 V5 5G " target="_self">真我 V5 5G </a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/realme-x50-pro-play" title="真我 X50 Pro 玩家版" target="_self">真我 X50 Pro 玩家版</a>
                        </li>
                        
                      </ul>
                    </div>
                     
                    <div class="footer-menu">
                      <div class="footer-menu-title">服务支持<span class="icon icon-plus"></span></div>
                      <ul class="footer-menu-list">
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/legal/delivery-terms" title="配送方式" target="_self">配送方式</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/legal/warranty-terms" title="服务政策" target="_self">服务政策</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/support/faq" title="常见问题" target="_self">常见问题</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/support/troubleshooting" title="故障排除" target="_self">故障排除</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/presoftware" title="预装应用公示" target="_self">预装应用公示</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://buy.realme.com/cn/rpass-check" title="R码通道" target="_self">R码通道</a>
                        </li>
                        
                      </ul>
                    </div>
            
                    <div class="footer-menu">
                      <div class="footer-menu-title">关于我们<span class="icon icon-plus"></span></div>
                      <ul class="footer-menu-list">
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/brand" title="关于realme" target="_self">关于realme</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.coloros.com/index.html" title="ColorOS官网" target="_blank">ColorOS官网</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realmebbs.com/" title="realme社区" target="_blank">realme社区</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://career.realme.com/" title="加入我们" target="_self">加入我们</a>
                        </li>
                        
                      </ul>
                    </div>
                
                    <div class="footer-menu">
                      <div class="footer-menu-title">联系我们<span class="icon icon-plus"></span></div>
                      <ul class="footer-menu-list">
                        
                        <li style="white-space: nowrap;">
                          <a href="mailto:pr@realme.com" title="pr@realme.com" target="_self">pr@realme.com</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="mailto:service.cn@realme.com" title="service.cn@realme.com" target="_self">service.cn@realme.com</a>
                        </li>
                        <li style="white-space: nowrap;">
                          <a href="javascript:void(0)" title="深圳市南山区海德三道航天科技广场B座25楼" target="_self">深圳市南山区海德三道航天科技广场B座25楼</a>
                        </li>
                        
                      </ul>
                    </div>  
                </div>
            </div>
            <div class="footer-contact">
                <div class="footer-contact-phone">400-628-0066</div>
                <div class="footer-contact-time">8:00-20:00，周一至周日</div>
                <div class="footer-contact-online">
                    <span class="icon icon-chat"></span>
                    <p class="kefu">在线客服</p> 
                </div>
                <div class="footer-contact-time">9:00-22:00，周一至周日</div>
                <div class="footer-socials">
                    <a href="">
                        <span class="icon icon-wechat"></span>
                    </a>
                    <a href="">
                        <span class="icon icon-weibo"></span>
                    </a>
                </div>
            </div>

        </div>
        <div class="footer-region"><a href="#">Mainland China ( 简体中文 / CNY )</a></div>
        <div class="footer-bottom">
            <div class="wrapper">
                <div class="copyright">
                  © 2019-2020 realme 版权所有. 渝ICP证20200030号&nbsp;
                  <a href="http://beian.miit.gov.cn/" rel="nofollow">渝ICP备19011033号-1</a><i></i>
                  <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50011202501913" rel="nofollow"><span class="icon icon-emblem"></span>渝公网安备 50011202501913号</a>
                  <!-- <iframe frameborder="0" height="16" width="16" allowtransparency="true" scrolling="no" src="http://wljg.scjgj.cq.gov.cn/ztgsgl/WebMonitor/GUILayer/eImgMana/gshdimg.aspx?sfdm=120200728115828137484"></iframe> -->
                </div>
                <div class="footer-legal">
                  <a href="https://www.realme.com/legal/privacy-policy" title="realme 隐私政策">隐私政策</a>
                  <a href="https://www.realme.com/legal/user-agreement" title="realme 用户协议">用户协议</a>
                  <a href="https://www.realme.com/legal/warranty-terms" title="realme 服务政策">服务政策</a>
                  <a href="https://www.realme.com/legal/ip-policy" title="realme 侵权投诉指引">侵权投诉指引</a>
                </div>
              </div>
        </div>
    </div>

    <script src="jquery.min.js"></script>
     <!-- 登录状态 -->
     <script>
        let userInfo = sessionStorage.getItem("userInfo");
        if(userInfo){
            $(".personal #denglu").text("退出登录")
            $(".personal #denglu").attr("href","details.html")
            $(".personal #denglu").click(function(){
                sessionStorage.removeItem("userInfo")
                $(".personal #denglu").text("登录")
            })
        }
        $(".personal #gouwuche").click(function(){
                if(!userInfo){
                alert("您还未登录！")
                $(".personal #gouwuche").attr("href","login.html")
            }
        })
        $(".personal #dingdan").click(function(){
                if(!userInfo){
                alert("您还未登录！")
                $(".personal #dingdan").attr("href","login.html")
            }
        })
    </script>
     <!--导航栏下拉  -->
     <script src="js/common.js"></script>
    
    <!-- 插入详情 -->
    <script>
        String.prototype.parseUrl = function(){
            let arr = this.slice(this.indexOf("?") + 1).split("&");
            let result = {}
            arr.forEach(item=>{
                let key = item.split("=")[0];
                let value = item.split("=")[1];
                
                result[key] = value;
            })
            return result;
        }
        $.ajax({
            url:"http://127.0.0.1:82/getPhoneDetails",
            data:{
                id:location.href.parseUrl().id
            },
            async:false,
            success(data){
                $(".phone-content").html(data.details);
                console.log($(".total-btn btn-black"))
                $(".total-btn .btn-black").attr("href",`shopcar.html?id=${data.id}`)
            }
        })
        $(".total-btn .btn-black").click(function(){
                if(!userInfo){
                alert("您还未登录！")
                $(".total-btn .btn-black").attr("href","login.html")
            }
        })

        
        $(".total-btn .btn-black").click(function(){
            let userid = JSON.parse(userInfo)[0].id
            $.ajax({
                url:"http://127.0.0.1:82/addShopcar",
                data:{
                    goodsid:location.href.parseUrl().id,
                    userid:userid,
                },
                success(data){
                    $(".phone-content").html(data.details);
                    $(".total-btn .btn-black").attr("href",`shopcar.html?id=${data.id}`)
                }
            })
        })
    </script>
   
    <!-- 颜色选择 -->
    <script>
         $(".phone-name span").text($(".wrapper-right .title p").text())
        $(".color-sel p").click(function(){
            $(".color-sel p").removeClass("blod")
            $(this).addClass("blod")
            if( $(this).index() === 0){
                let imgList =  $(".wrapper-left img")
                for(let i = 0 ; i <imgList.length ; i++){
                    let a = imgList[i].getAttribute("src")
                    let r = a.replace("2","1") 
                    imgList[i].setAttribute("src",r)
                } 
            }
            if( $(this).index() === 1){
                let imgList =  $(".wrapper-left img") 
                for(let i = 0 ; i <imgList.length ; i++){
                    let a = imgList[i].getAttribute("src")
                    let r = a.replace("1","2")
                    imgList[i].setAttribute("src",r)
                } 
            }
        })
    </script>
    <!-- 版本选择 -->
    <script>
        let banbenjiage =  $(".total-price .exp").text()
        let expbanbenjiage = Number( banbenjiage.slice(1))
        $(".banben-sel p").click(function(){
            $(".banben-sel p").removeClass("blood")
            $(this).addClass("blood")
            if( $(this).text()==="8GB+128GB"){
                $(".total-price .exp").text(`￥${expbanbenjiage + 300}`)
            }
            if( $(this).text()==="6GB+128GB"){
                $(".total-price .exp").text(banbenjiage)
            }
        })
    </script>
    <!-- 放大镜 -->
    <script>
        //鼠标移入产品小图事件
        $(".phone-thumbs img").mouseenter(function(){//鼠标悬浮在不同的产品小图片时外加黑色边框并且主图将其显示出来
                $(".phone-thumbs img").css({"border":"2px solid #FFF"});
                $(this).css({"border":"2px solid #000"});//this获取的是当前鼠标移入的元素，设置黑色边框
                var imgsrc=$(this).attr("src");//获取当前鼠标移入元素的src属性值将其赋值给主图元素
                $(".phone-img img").attr("src",imgsrc);
            });
        //鼠标移入产品主图时出现放大的细节图和小框 
        $(".phone-img").mouseenter(function(){
            $(".showbox").show();
            $(".showlarge").show();
        });
        //鼠标离开产品主图元素事件，此处使用mouseleave事件只有在鼠标指针离开被选元素时才会触发，mouseout鼠标指针离开被选元素和其任何子元素都会触发。
        $(".phone-img").mouseleave(function(){
                $(".showbox").hide();//小框隐藏
                $(".showlarge").hide();//放大图隐藏
            });

        //鼠标在产品主图移动事件
        $(".phone-img").mousemove(function(e){
                var mousex=e.clientX;//获取鼠标当前对于浏览器可视区的X坐标
                var mousey=e.clientY;
                var imgx=$(".phone-img").offset().left;//获得产品主图对于文档的偏移坐标
                var imgy=$(".phone-img").offset().top;
                // 小框的left值是鼠标位移减去产品图元素偏移坐标减去小框宽度的一半，使鼠标保持位于小框的中间
                var boxleft=mousex-imgx-$(".showbox").width()/2;//计算小框对于产品主图元素的距离用来定位
                var boxtop=mousey-imgy-$(".showbox").height()/2;
                
                //鼠标移动小框位置跟着变化
                $(".showbox").css({"top":boxtop,"left":boxleft});
                //计算小框移动的最大范围
                var maxtop=$(".phone-img").height()-$(".showbox").height();
                var maxleft=$(".phone-img").width()-$(".showbox").width();
                //判断小框移动的边界
                if(boxtop<=0){
                    $(".showbox").css("top","0");
                }else if(boxtop>maxtop){
                    $(".showbox").css("top",maxtop);
                }
                if(boxleft<=0){
                    $(".showbox").css("left","0");
                }else if(boxleft>maxleft){
                    $(".showbox").css("left",maxleft);
                }
                //设置放大图的位置偏移量，获取小框偏移量乘放大倍数，注意！！！放大图偏移量应设置为负值
                var showleft=-$(".showbox").position().left*2;//position()方法返回当前元素相对于父元素的位置（偏移）
                var showtop=-$(".showbox").position().top*2;
                //此处获取小框偏移量不应该使用前面计算出来的boxtop和boxleft值，因可能会出现超出移动的边界
                $(".showlarge img").css({"left":showleft,"top":showtop});
            });    
    </script>
</body>
</html>